<template >
  <!-- //大盒子 -->
  <div style="width:100%;height:93vh;">
    <!-- //商家展示 -->
    <div
      @click="tcc"
      style="width:100%;height:20vh;float:left;background:black;color:white;border-bottom:1px solid white"
    >
      <div style="height:3.5vh;width:100%;"></div>
      <div style="width:30%;height:13vh;line-height:15vh;float:left;margin-left:2%">
        <img :src="this.item_title.shopPic" height="100%" width="100%" alt />
      </div>
      <div
        style="width:65%;height:13vh;float:left;margin-left:3%;font-size:13px"
      >{{this.item_title.shopName}}</div>
      <div style="height:3.5vh;width:100%"></div>
    </div>

    <div style="width:100%;height:73vh;float:left" @click="tcc">
      <!-- 商品区左 -->
      <div class="right_class" style="width:30%;height:73vh;float:left;">
        <div
          :class="left_index===index?'right_class_p':''"
          @click="onclick_right(item,index)"
          class="right_class_div"
          v-for="(item, index) in item_left"
          :key="index"
        >
          <p
            style=" display: inline-block;
            white-space: nowrap; 
            width: 100%; 
            overflow: hidden;
            text-overflow:ellipsis;"
          >{{item.categoryName}}</p>
        </div>
      </div>
      <!-- 商品区右 -->
      <div
        style="width:69.6%;height:73vh;float:left;  background: black;color:white;overflow: scroll;"
      >
        <div v-for="(item, index) in item_right" :key="index">
          <div style="width: 90%;height:15vh; margin-left:10%">
            <div style="height:2.5vh;width:100%;"></div>
            <div style="width:30%;height:10vh;line-height:15vh;float:left;margin-left:2%">
              <img :src="item.bigImageUrl" height="100%" width="100%" alt />
            </div>
            <div style="width:65%;height:10vh;float:left;margin-left:3%;font-size:12px">
              <p
                style=" display: inline-block;
              white-space: nowrap; 
              width: 100%; 
              overflow: hidden;
              text-overflow:ellipsis;"
              >{{item.spuName}}</p>
              <p style="color:red;font-size:13px">￥:{{item.originPrice}}</p>
              <br />
              <p>
                <button
                  @click="plus(item,index)"
                  style="background:black;color:rgb(250, 166, 9)"
                >加入购物车</button>
              </p>
            </div>
            <div style="height:2.5vh;width:100%"></div>
          </div>
          <br />
        </div>
      </div>
    </div>
    <div class="tsc" v-show="show">
      <div v-for="(item, index) in cart_item" :key="index">
        <br />
        <div style="width:90%;margin-left:5%;font-size:12px">
          <p style="height:3vh;line-height:3vh">
            <span>{{item.spuName}}</span>
            <span style="color:red">￥:{{item.currentPrice*item.num}}</span>
            <van-stepper
              style="display:inline; right:0;   position: absolute;"
              @plus="onplus(item.num)"
              v-model="item.num"
              theme="round"
              button-size="20"
              disable-input
            />
          </p>
        </div>
      </div>
    </div>
    <div class="top_cart">
      <div class="top_icon" @click="cart_bottom">
        <van-icon color="red" class="icon_img" size="6vh" name="cart" />
      </div>
      <div class="cart_zj">总价:{{total}}</div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      list: [],
      item: [],
      item_title: [],//店铺展示信息
      item_left: [],
      item_right: [],
      item_data: [],
      left_index: 0,
      show: false,
      cart_item: [],
    }
  },
  created () {
    let cart_item = localStorage.cart_item;
    if (cart_item) {
      this.cart_item = JSON.parse(cart_item);
    }
  },
  methods: {
    onplus (item) {
      this.cart_item.num=item
      localStorage.cart_item = JSON.stringify(this.cart_item);
      console.log(11)
    },
    tcc () {
      this.show = false
    },
    cart_bottom () {
      this.show = true
    },
    onclick_right (item, index) {
      this.left_index = index
      this.item_right = item.spuList
      console.log(this.item_right)

    },
    plus (item, index) {
      var state = false
      this.cart_item.forEach((ele) => {
        if (ele.spuId === item.spuId) {
          state = true
          item.num++
        }
      })

      if (!state) {
        item.num = 1,
          this.cart_item.push(item)
      }
      console.log(this.cart_item)
      localStorage.cart_item = JSON.stringify(this.cart_item);
    }
  },
  computed: {
    total () {
      let total = 0
      this.cart_item.map(item => {
        total += item.originPrice * item.num
      })
      return total
    }
  },
  mounted () {

    axios.get('http://localhost:8080/shopdetails.json', {

    })
      .then(res => {
        // console.log(res.data)
        this.list = res.data
        let mtWmPoiId = this.$route.query.mtWmPoiId
        this.list.forEach((ele) => {

          if (ele.data.mtWmPoiId === mtWmPoiId) {
            this.item_data.push(ele.data)
            this.item.push(ele.data.shopInfo)
            console.log(this.item[0])
            this.item_title = this.item[0]
            this.item_left = this.item_data[0].categoryList
            console.log(this.item_left)
            if (this.left_index === 0) {
              this.item_right = this.item_left[0].spuList
            }


          }
        })

      })

  }

};
</script>
<style scoped>
.tsc {
  height: 35vh;
  width: 100%;
  bottom: 7vh;
  background: rgb(255, 255, 255);
  position: absolute;
  overflow: scroll;
}
.van-stepper__input {
  color: #ffffff !important;
}
</style>
<style  scoped>
.right_class {
  overflow: scroll;
  text-align: center;
  background: black;
}
.right_class_div {
  height: 7vh;
  line-height: 7vh;
  font-size: 12px;
  font-weight: bold;

  color: white;
}
.right_class_p {
  color: red;
  font-size: 13px;
  border-left: 2px solid red;
}
.top_cart {
  background: rgb(250, 166, 9);
  height: 7vh;
  width: 100%;
  position: absolute;
  float: left;
  bottom: 0;
}
.top_icon {
  width: 13vh;
  background: rgb(250, 166, 9);
  border-top-left-radius: 100% 100%;
  border-top-right-radius: 100% 100%;
  height: 7vh;
  margin-top: -1.5vh;
  float: left;
}
.icon_img {
  margin-left: 3.5vh;
  float: left;
  margin-top: 1.5vh;
}
.cart_zj {
  color: white;
  height: 7vh;
  line-height: 7vh;
  margin-left: 65%;
}
</style>